<template>
	<div class="pagination">
		<svg :class="{disable:!value.hasPreviousPage}" @click="prevPage" class="icon" width="40" height="40" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774="">
			<path fill="currentColor" d="M609.408 149.376L277.76 489.6a32 32 0 000 44.672l331.648 340.352a29.12 29.12 0 0041.728 0 30.592 30.592 0 000-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 000-42.688 29.12 29.12 0 00-41.728 0z"></path>
		</svg>
		<span class="page">{{ value.pageNum }}/{{ value.pages }}</span>
		<svg :class="{ disable: !value.hasNextPage }" @click="nextPage" class="icon" width="40" height="40" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-042ca774=""><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 000 42.752L652.736 512 340.864 831.872a30.592 30.592 0 000 42.752 29.12 29.12 0 0041.728 0L714.24 534.336a32 32 0 000-44.672L382.592 149.376a29.12 29.12 0 00-41.728 0z"></path></svg>
	</div>
</template>

<script>
export default {
	props: {
		value: Object
	},
	methods: {
		prevPage() {
			if (this.value.hasPreviousPage) {
				this.$emit('change', this.value.prePage, this.value.pageSize);
			}
		},
		nextPage() {
			if (this.value.hasNextPage) {
				this.$emit('change', this.value.nextPage, this.value.pageSize);
			}
		}
	}
};
</script>

<style lang="scss">
.pagination {
	position: absolute;
	width: 40px;
	height: 120px;
	right: -50px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	span {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		cursor: pointer;
		&:hover {
			background-color: rgba(0, 0, 0, 0.04);
		}
	}
	.page {
		&:hover {
			background-color: unset;
		}
	}
	.disable {
		cursor: no-drop;
		color: #ccc;
		&:hover {
			background-color: unset;
		}
	}
}
@media screen and (max-width: 768px) {
	.pagination {
		position: static;
		width: 100%;
		height: 60px;
		display: flex;
		flex-direction: row;
		span {
			width: 100%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
			&:hover {
				background-color: rgba(0, 0, 0, 0.04);
			}
		}
		.page {
			&:hover {
				background-color: unset;
			}
		}
	}
}
</style>
